define([
    'jQuery',
    'Underscore',
    'Backbone',
    'Kendo',
    'i18n!nls/language',    
    'models/soil',
    'datasources/soil',
    'text!templates/soil/overview.html'
], function($, _, Backbone, Kendo, i18n, Soil, soilDatasource, soilOverviewTemplate) {

    
    
    var soilOverviewView = Backbone.View.extend({
    

        // main page element
        el: $("#content"),
        


        render: function() {

            // render the main template to the main element
            this.$el.html(soilOverviewTemplate);

            // create the grind containing the update elements
            $("#soil_grid").kendoGrid({
                dataSource: soilDatasource,
                columns: [{
                        field: "id",
                        title: "id",
                        width: 80,
                    }, { 
                        field: "name",
                        title: "naam", 
                    }, { 
                        field: "active",
                        title: "actief", 
                        width: 100,
                    }],
                toolbar: [{ 
                        name: "create",
                        text: "voeg nieuwe rij toe",
                    }, {
                        name: "save",
                        text: "opslaan",
                    }, { 
                        name : "cancel",
                        text: "annuleren",
                    }],
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    messages: i18n.grid.message
                },
                sortable: {
                    mode: "multiple",
                    allowUnsort: true
                },
                editable: true,
            });

        
        } // render: function()
        

    
    });
    
    
    
    return new soilOverviewView;
    
    
    
});